<style lang='less' >
  	@import '~style/table.less';

</style>

<template>
  <div v-show='this.$route.name == "appointmentList"'>

    <div class="dataBox transcation" >
      <el-table
        :data="data"
        height="450"
        style="width: 100%"
        :default-sort = "{prop: 'id', order: 'ascending'}">
        <el-table-column
          prop='index'
          sortable
          label="序号"
          width='100'>
        </el-table-column>
        <el-table-column
          prop="recordNo"
          label="预约编号"
          width='150'>
        </el-table-column>
        <el-table-column
          prop="userName"
          label="用户姓名"
          width='100'>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="用户手机" min-width="180">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="产品名称"
          width='200'>
        </el-table-column>
        <el-table-column
          prop="issuerName"
          label="发行公司"
          width='100'>
        </el-table-column>
        <el-table-column
          prop="financialName"
          label="理财师姓名"
          sortable
          width='130'>
        </el-table-column>
        <el-table-column
          prop="ifaString"
          label="是否IFA"
          sortable
          width='130'>
        </el-table-column>
        <el-table-column
          prop="sourceString"
          label="来源"
          sortable
          width='150'>
        </el-table-column>
        <el-table-column
          prop="financialDepartment"
          label="理财师所属部门"
          sortable
          width='170'>
        </el-table-column>
        <el-table-column
          prop="recordDate"
          label="预约时间"
          sortable
          width='150'>
        </el-table-column>

        <el-table-column label="操作" min-width="100">
          <template scope="scope">
            <control-button
              :scope='scope'
              :btnControl='getButtonConfig'
              :reservationRecordType='reservationRecordType'
              v-on:setTableParams='setTableParams'
            >

            </control-button>
          </template>

        </el-table-column>

      </el-table>
    </div>

    <div class="paginationBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total='totalSize'>
      </el-pagination>
    </div>
  </div>

</template>


<script>
  import controlButton from './controlButton.vue'
  export default {
    props:['data','getButtonConfig','totalSize','reservationRecordType'],
    components:{
      controlButton
    },
    data(){
      return{
        currentPage:1,//当前页
        pageSize:10,//每页显示的条数
      }
    },
    methods:{
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.currentPage = 1;
        this.setTableParams();

      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val;
        this.setTableParams();
      },

      setTableParams(){
        let obj = {
          curPage:this.currentPage-1,
          pageSize:this.pageSize,
        }
        this.$emit('setTableParams', obj)
      },

    },
    created(){
      this.setTableParams()
    },
    mounted(){

    },
  }
</script>
